<template>
  <div class="miniPlayList">
    <div
      class="mask"
      @click.self="store.commit('updateShowMiniPlayList', false)"
    >
      <div class="pannel">
        <div class="header">
          <h4>当前播放</h4>
          <span>(12)</span>
        </div>
        <div class="middle">
          <div class="playModel">
            <svg aria-hidden="true">
              <use xlink:href="#icon-xunhuan"></use></svg
            ><span>列表循环</span>
          </div>
          <div class="opPannel">
            <svg aria-hidden="true">
              <use xlink:href="#icon-w_xiazai"></use>
            </svg>
            <svg aria-hidden="true">
              <use xlink:href="#icon-tianjiadaozuhe"></use>
            </svg>
            <svg aria-hidden="true">
              <use xlink:href="#icon-shanchu"></use>
            </svg>
          </div>
        </div>
        <div class="content">
          <div
            class="songItem"
            v-for="(song, index) in store.state.playList"
            @click="store.commit('updatePlayListIndex', index)"
            :key="index"
          >
            <div :class="{'song active':store.state.playListIndex == index,'song':store.state.playListIndex != index}">
            <svg aria-hidden="true" v-show="
            store.state.playListIndex == index">
              <use xlink:href="#icon-shuzhuangtu-copy"></use>
            </svg>
              <h4>{{ song.name }}</h4>
              <h5>- {{ song.ar[0].name }}</h5>
            </div>
            <div class="delete">+</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";

let store = useStore();
</script>

<style lang="less" scoped>
.miniPlayList {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 20;
  .mask {
    width: 100vw;
    height: 100vh;
    // background-color: rgba(0, 0, 0, 0.07);
    .pannel {
      height: 8rem;
      width: 90%;
      background-color: #fff;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0.4rem;

      border-radius: 0.4rem;
      padding: 0.3rem;
      box-shadow: 2px 2px .2rem rgba(0, 0, 0, 0.4);
      .header {
        display: flex;
        align-items: baseline;
        span {
          font-size: 0.2rem;
          color: rgb(74, 74, 74);
        }
      }
      .middle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.1rem 0;
        .playModel {
          width: 3rem;
          display: flex;
          align-items: center;
          flex: 5;
          svg {
            width: 0.4rem;
            height: 0.4rem;
            fill: rgb(74, 74, 74);
          }
        }
        .opPannel {
          display: flex;
          flex: 3;
          justify-content: space-around;
          svg {
            width: 0.4rem;
            height: 0.4rem;
            fill: rgb(74, 74, 74);
          }
        }
      }
      .content {
        height: 6.4rem;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        .songItem {
          width: 100%;
          height: 0.8rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .song {
            display: flex;
            align-items: center;
            flex: 6;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            h4 {
              font-weight: 400;
              color: #434344;
              font-size: 0.3rem;
            }
            h5 {
              font-weight: 400;
              font-size: 0.2rem;
              color: #959595;
            }
            svg{
              width: .3rem;
              height: .3rem;
              margin:0 .1rem;
            }
          }

          .active {
            h4,
            h5 {
              color: #df1b05;
            }
          }

          .delete {
            flex: 2s;
            padding-right: 0.2rem;

            width: 0.4rem;
            height: 0.4rem;
            font-size: 0.4rem;
            transform: rotate(45deg);
            color: #959595;
            font-weight: 200;
          }
        }
      }
    }
  }
}
</style>